<template>
  <div v-if="alertData.isShow" data-mask="1" class="pop-container box box-ac box-pc animated fadeIn" data-close-ani="bounceOut">
      <div class="alert box box-ver animated bounceIn pop-content">
        <div v-if="alertData.title" class="alert-title box box-pc">{{alertData.title?alertData.title:'提示'}}</div>
        <div class="alert-content box box-pc">{{alertData.content?alertData.content:"确定？"}}</div>
        <div v-if="alertData.buttons.length>0" class="alert-buttons box">
          <div @click="alertData.buttonCall(index)" v-html="item" v-for="(item,index) in alertData.buttons" class="box box-ac box-pc box-f1 box-fh alert-button"></div>
        </div>
      </div>
  </div>
</template>

<script>
import '@/css/animate'
export default {
  name: 'Alert',
  props: {
    alertData: {
      type: Object,
      default () {
        return {
          isShow: false,
          buttons: [],
          buttonCall (index) {
            console.log(index)
          }
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
$padUnit: .25rem;
.pop-container{
    position:fixed;
    z-index:99999;
    top:0;
    bottom:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    overflow-y: hidden;
    .alert{
      position:relative;
      overflow:hidden;
      border-radius:$padUnit;
      width:80%;
      background-color:#FFF;
      .alert-title{
        font-size:.3rem;
        margin-top:$padUnit;
      }
      .alert-content{
        font-size:.28rem;
        text-align:center;
        padding-top:$padUnit;
        padding-bottom:$padUnit;
        margin:0 2*$padUnit;
        color:#666;
      }
      .alert-buttons{
        border-top:1px solid #DDD;
      }
      .alert-button{
        padding-top:$padUnit;
        padding-bottom:$padUnit;
        border-left:1px solid #DDD;
        &:first-child{
            border:none;
        }
      }
  }
}
</style>
